<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定样式</title>
        <style>
            [v-cloak] { display: none; }
            .wrapper {
                width: 80%;
                border: 1px solid gray;
                margin: auto;
            }
            .wrapper>.title {
                margin: 10px 0;
                background: #f0f0f0;
            }
            .wrapper>div {
                margin: 10px;
            }
            .active {
                background: rgb(255, 119, 56);
            }

            .second {
                border: 1px solid blue;
            }
        </style>
    </head>
    <div>

        <h3>绑定样式</h3>
        <p>用元素的 class 属性绑定样式</p>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                <p class="title">绑定对象: `v-bind:class="{ className: dataProperty }"`</p>
                <div v-bind:class="{ active: actived }" v-on:mouseover="change" v-on:mouseout="recover">
                    {{datetime}}
                </div>
                <p class="title">绑定数组: `v-bind:class="['second','active']"`</p>
                <div v-bind:class="[ 'second', 'active' ]">
                    {{datetime}}
                </div>
                <div v-bind:class="[ activeClass, secondClass ]">
                    {{datetime}}
                </div>
                <div v-bind:class="[ actived ? activeClass : '', secondClass ]">
                    {{datetime}}
                </div>
                <div v-bind:class="[ { active: actived }, secondClass ]">
                    {{datetime}}
                </div>
                <div v-bind:class="array">
                    {{datetime}}
                </div>
            </div>
        </div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        datetime: new Date().toISOString(),
                        // 数据属性
                        actived: false,
                        activeClass: 'active',
                        secondClass: 'second',
                        array: ['second', 'active']
                    }
                },
                methods: {
                    change() {
                        this.actived = true;
                    },
                    recover() {
                        this.actived = false
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>